<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #input1{
      width: 400px;
      height: 24px;
      margin-left: 100px;
    }
    div{
      width: 400px;
      height: 300px;
      margin-left: 100px;
      background: #eeeeee;
    }
    #content{
      display: none;
    }
  </style>
</head>
<body>
<br>
<br>
<form action="" method="post">
  <input id="input1" onkeyup="autocompletion(this)" name="keyword" autocomplete="false">
  <input type="submit" value="搜索">
  <div id="content"></div>
</form>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.7.1.js"></script>
<script>
  var content=document.getElementById('content');
  function autocompletion(obj){
    var prefix = $(obj).val();
    $.getJSON("http://localhost:8080/autocomplete?prefix="+prefix.trim(),function(data){
      $('#content').html('');
      for (let i = 0; i < data.length; i++) {
        var p = document.createElement('p');
        console.log(data[i].university)
        p.innerText=data[i].university;
        content.appendChild(p);
      }
      $('#content').show()
    })
  }
  $('#input1').blur(function (){
    $('#content').hide()
  })
</script>
</body>
</html>